<template>
  <div>

    <h4 class="form-header h4">基本信息</h4>
    <el-form ref="searchForm" :model="searchForm" label-width="90px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="承运商名称" prop="name">
            <el-input v-model="searchForm.name"  placeholder="承运商名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人" prop="contactName">
            <el-input v-model="searchForm.contactName" placeholder="联系人名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="地址" prop="phone">
            <el-input v-model="searchForm.phone" placeholder="地址"/>
          </el-form-item>
        </el-col>
        <el-button @click="getCarriersPage" size="mini" style="float: left;margin-left: 15px;margin-top: 6px"
                   type="primary" icon="el-icon-zoom-in" plain>查找
        </el-button>
        <el-button @click="resetSearch" size="mini" style="float: left;margin-left: 15px;margin-top: 6px" type="warning"
                   icon="el-icon-refresh" plain>重置
        </el-button>
      </el-row>
    </el-form>
    <el-button size="mini" style="float: left" type="primary" icon="el-icon-plus" plain @click="toSave">新增</el-button>
    <el-button size="mini" style="float: left" type="danger" icon="el-icon-delete" plain @click="delMany">批量删除
    </el-button>

    <h4 class="form-header h4">承运商信息</h4>
    <el-table ref="carriersTable" :data="carriersTable" v-loading="loading" :highlight-selection-row="true"
              @selection-change="someDel">
      <el-table-column label="序号" prop="id" align="center">
      </el-table-column>
      <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
      <el-table-column label="承运商名称" align="center" prop="name"/>
      <el-table-column label="联系人" align="center" prop="contactName"/>
      <el-table-column label="邮箱" align="center" prop="email"/>
      <el-table-column label="电话" align="center" prop="phone"/>
      <el-table-column label="地址" align="center" prop="address"/>
      <el-table-column label="创建时间" align="center" prop="createdAt" width="180"/>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-link icon="el-icon-edit" :underline="false" @click="toUpdate(scope.row)">编辑</el-link>
          &nbsp;
          <el-link icon="el-icon-delete" :underline="false" @click="delCarr(scope.row.id)" id="el_delete">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        :page-size="3"
        :pager-count="11"
        layout="prev, pager, next"
        :total="searchForm.total"
        @current-change="nextPage"
    >
    </el-pagination>

    <!--  新增/修改-->
    <el-dialog
        title="操作"
        :visible.sync="carFormDialog"
        width="50%"
        :destroy-on-close="true">

      <el-form :model="carRuleForm" :inline="true" :rules="rules" ref="carRuleForm" label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="承运商名称" prop="name">
          <el-input v-model="carRuleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contactName">
          <el-input v-model="carRuleForm.contactName"/>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="carRuleForm.email"/>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="carRuleForm.address"/>
        </el-form-item>
        <el-form-item style="margin-right: 330px" label="手机号" prop="phone">
          <el-input v-model="carRuleForm.phone"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="resetForm">重置</el-button>
          <el-button type="primary" @click="carSubmit('carRuleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {addCarriers, delCarriers, delManyCarr, getCarriers, updateCarriers} from "@/api/login";

export default {
  name: "CarriersView",
  data() {
    return {
      searchForm: {
        name: '',
        contactName: '',
        phone: '',
        pageNow: 1,
        total: 0
      },
      carriersTable: [],
      loading: true,
      carFormDialog: false,
      carRuleForm: {
        id: 0,
        name: '',
        contactName: '',
        email: '',
        phone: '',
        address: '',
      },
      carriersIds: [],
      rules: {
        name: [
          {required: true, message: '请输入承运商名称', trigger: 'blur'},
        ],
        contactName: [
          {required: true, message: '请输入联系人名称', trigger: 'blur'},
        ],
        address: [
          {required: true, message: '请输入地址', trigger: 'blur'},
        ],
        email: [
          {required: true, message: '请输入电子邮件', trigger: 'blur'},
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
        ],
      }
    }
  },
  created() {
    this.getCarriersPage();
  },
  methods: {
    delMany() {
      let that = this;
      if (that.carriersIds.length == 0) {
        that.$message.error("至少选择一条数据！")
        return false;
      }
      delManyCarr(that.carriersIds).then(function (res){
        if (res.code===200){
          that.$message.success("删除成功");
          that.getCarriersPage();
        }
      })
    },
    someDel(one) {
      let that = this;
      let carriers = one;
      let cidArray = [];
      for (let i = 0; i < carriers.length; i++) {
        cidArray.push(carriers[i].id)
      }
      that.carriersIds = cidArray
      console.log(that.carriersIds)
    },
    getCarriersPage() {
      let that = this;
      getCarriers(that.searchForm).then(function (res) {
        if (res.code === 200) {
          that.carriersTable = res.data.records
          that.searchForm.total = res.data.total;
          that.loading = false;
        }
      })
    },
    resetSearch() {
      let that = this;
      that.searchForm.name = '';
      that.searchForm.contactName = '';
      that.searchForm.phone = '';
    },
    nextPage(val) {
      let that = this;
      that.searchForm.pageNow = val;
      that.getCarriersPage();
    },
    resetForm() {
      let that = this;
      that.carRuleForm = {
        id: 0,
        name: '',
        contactName: '',
        email: '',
        phone: '',
        address: '',
      };
    },
    toSave() {
      let that = this;
      that.resetForm();
      that.carFormDialog = true;
    },
    toUpdate(row) {
      let that = this;
      that.carRuleForm.id = row.id
      that.carRuleForm.name = row.name
      that.carRuleForm.contactName = row.contactName
      that.carRuleForm.address = row.address
      that.carRuleForm.email = row.email
      that.carRuleForm.phone = row.phone
      that.carFormDialog = true;
    },
    carSubmit() {
      let that = this;
      if (that.carRuleForm.id == 0) {
        addCarriers(that.carRuleForm).then(function (res) {
          if (res.code === 200) {
            that.$message.success("操作成功")
            that.carFormDialog = false;
            that.getCarriersPage();
          }
        })
      } else {
        updateCarriers(that.carRuleForm).then(function (res) {
          if (res.code === 200) {
            that.$message.success("操作成功")
            that.carFormDialog = false;
            that.getCarriersPage();
          }
        })
      }
    },
    delCarr(id) {
      let that = this;
      that.$confirm('此操作将永久删除该承应商信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCarriers(id).then(function (res) {
          if (res.code == 200) {
            that.$message.success("删除成功")
            that.getCarriersPage();
          } else {
            that.$message.error("删除失败")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>
::v-deep .el-form-item__label {
  font-weight: bold;
}

::v-deep .el-input__inner {
  height: 28px;
}

#el_delete:hover {
  color: red;
}
</style>